<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Web Canvas</title>
  <link rel="stylesheet" href="styles/popup.css">
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Web Canvas</h1>
      <div class="toggle-container">
        <label class="switch">
          <input type="checkbox" id="activateCanvas">
          <span class="slider"></span>
        </label>
        <span>Enable Canvas</span>
      </div>
    </div>
    
    <div class="tool-status">
      <span class="current-tool">Pen Tool</span>
      <span class="color-preview"></span>
    </div>
    
    <div class="tools">
      <div class="tool-section">
        <h2>Drawing Tools</h2>
        <button id="pen" class="tool-btn" title="Pen Tool">
          <span class="icon">✏️</span> Pen
        </button>
        <button id="highlighter" class="tool-btn" title="Highlighter Tool">
          <span class="icon">🖍️</span> Highlighter
        </button>
        <button id="eraser" class="tool-btn" title="Eraser Tool">
          <span class="icon">🧹</span> Eraser
        </button>
      </div>

      <div class="tool-section">
        <h2>Colors</h2>
        <div class="color-picker">
          <input type="color" id="colorPicker" value="#FF0000" title="Choose Color">
        </div>
      </div>

      <div class="tool-section">
        <h2>History</h2>
        <button id="undo" class="action-btn" title="Undo (Ctrl+Z)">
          <span class="icon">↩️</span> Undo
        </button>
        <button id="redo" class="action-btn" title="Redo (Ctrl+Y)">
          <span class="icon">↪️</span> Redo
        </button>
      </div>

      <div class="tool-section">
        <h2>Actions</h2>
        <button id="clear" class="action-btn" title="Clear Canvas">
          <span class="icon">🗑️</span> Clear All
        </button>
        <button id="save" class="action-btn" title="Save as PNG">
          <span class="icon">💾</span> Save
        </button>
      </div>
    </div>
    
    <div id="status-message" class="status-message"></div>
  </div>
  <script src="scripts/popup.js"></script>
</body>
</html>
